<template>
  <view class="tab"><base-tab-list class="base-tab-style" :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab-list></view>

  <view>
    <view v-if="tabIndex == 0" v-for="(item, index) in listData" :key="index"><order-list-item class="content-item mar" :records="item"></order-list-item></view>

    <view v-if="tabIndex !== 0" class="list-content mar" v-for="(item, index) in statusList">
      <order-list-item class="content-item" :itemType="item.name" model="设备型号" :price="22" :state="item.name" :records="item"></order-list-item>
    </view>
    <view v-else class="list-content mar" v-for="(item, index) in listData">
      <order-list-item
        class="content-item"
        v-show="item.name == clickLabel"
        :itemType="item.name"
        model="设备型号"
        :price="22"
        :state="item.name"
        :records="item"
      ></order-list-item>
    </view>
    <!-- <view class="footer">
			当“订单状态”为“配件支付中”和“服务支付中”2种状态时进入支付确认页面
		</view> -->
    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import { onLoadClickSystemDatasApi } from '@/api/equipment.js';
export default {
  data() {
    return {
      statusTypes: [
        {
          value: 'more',
          text: '加载前',
          checked: true
        },
        {
          value: 'loading',
          text: '加载中',
          checked: false
        },
        {
          value: 'noMore',
          text: '没有更多',
          checked: false
        }
      ],
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      },
      status: 'more',
      userInfo: {},
      tabIndex: 0,
      tabList: [
        {
          label: '全部订单'
        },
        {
          label: '已报修'
        },
        {
          label: '维修中'
        },
        {
          label: '已完成'
        },
        {
          label: '已取消'
        }
      ], // 初始化为空数组
      listData: [],
      clickLabel: '',
      statusList: [],
      page: 1,
      total: 0
    };
  },
  //上拉加载
  onReachBottom() {
    console.log('下拉加载');
    if (this.listData.length == this.total) {
      this.status = 'noMore';
      return;
    }

    this.page++;
    // this.getUniversityList();
    this.onLoadClickSystemDatas();
  },
  watch: {
    total: {
      handler(newVal) {
        if (newVal === this.listData.length) {
          this.status = 'noMore';
        } else {
          this.status = 'More';
        }
      },
      immediate: true
    }
    // tabIndex: {
    //   handler(newVal) {
    //     this.changeTab(newVal);
    //   },
    //   immediate: true
    // }
  },
  methods: {
    // 加载更多
    onChange(e) {
      // this.status = e.detail.value;
    },
    clickLoadMore(e) {
      // uni.showToast({
      //   icon: 'none',
      //   title: '当前状态：' + e.detail.status
      // });
    },
    changeTab(index) {
      let _this = this;
      this.tabIndex = index; // 更新标签索引
      console.log(index);
      // this.onLoadClickSystemDatas();
      switch (index) {
        case 0:
          this.onLoadClickSystemDatas();
          break;
        case 1:
          this.statusList = this.listData.filter(i => i.stateName === '已报修');
          console.log('---', this.statusList);
          break;
        case 2:
          this.statusList = this.listData.filter(i => i.stateName === '维修中');
          console.log('---', this.statusList);
          break;
        case 3:
          this.statusList = this.listData.filter(i => i.stateName === '已完成');
          console.log('---', this.statusList);
          break;
        case 4:
          this.statusList = this.listData.filter(i => i.stateName === '已取消');
          console.log('---', this.statusList);
          break;

        default:
          break;
      }
      this.clickLabel = this.tabList[index].label;
      console.log(this.clickLabel);
      // if (this.tabIndex === 0) {
      //   this.onLoadClickSystemDatas();
      // }
      // this.listData = this.listData.filter(i => i.stateName === '已完成');
      // console.log('---', this.listData);
    },
    async onLoadClickSystemDatas() {
      this.listData = [];
      const res = await onLoadClickSystemDatasApi(this.page, this.userInfo.user.id);
      try {
        console.log(res, 'res');
        // that.listData = [...res.data.data.records];
        this.total = res.data.data.total;
        this.listData = this.listData.concat([...res.data.data.records]);

        console.log(this.listData, 'that.listData');
        if (this.tabIndex === 0) {
          return;
        }
        this.changeTab(this.tabIndex);
      } catch (e) {
        //TODO handle the exception
      }
    }
  },
  onLoad(options) {
    this.userInfo = uni.getStorageSync('userData');
    console.log('user', this.userInfo.user.id);
    this.onLoadClickSystemDatas();
    setTimeout(() => {
      console.log(options);
      this.tabIndex = Number(options.index);
    }, 100);
  }
  // onShow() {
  //   this.onLoadClickSystemDatas();
  // }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}

.list-content {
  // padding: 20px;
}

.mar {
  background: rgb(79, 79, 79);
  margin: 20px 20px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;
  border-left: 4rpx solid #ffb612;
  border-right: 4rpx solid #ffb612;
}

.footer {
  padding: 20px;
  color: rgb(220, 87, 13);
}

.tab {
  min-height: 80rpx;
}
</style>
